<template>
  <div class="common-layout" style="min-width: 1000px;">
    <el-affix :offset="0">
      <el-container style="background-color: #ffffff;">
        <el-aside width="200px">
          <div style="margin-top: 30px;padding-left: 10px;">
            <mini_logo></mini_logo>
          </div>
        </el-aside>
        <el-main>
          <div style="padding: 20px;padding-top: 30px;">
            <web_search_box ref="searchBoxRef" :model="'zhzm-left'" :do-search-handle="doSearch"></web_search_box>
          </div>
        </el-main>
        <el-aside width="300px">
          <div style="margin-top: 30px;">
            <web_head></web_head>
          </div>
        </el-aside>
      </el-container>
    </el-affix>
    <div class="common-layout">
      <el-container style="min-height:500px;">
        <el-aside width="200px">
          <hr style="margin-top: 38px;border:1.5px solid #eee;;" />
        </el-aside>
        <el-main v-loading="loadingFlag">
          <el-tabs v-if="result.searchType == 'LU'" v-model="activeNameRef" class="demo-tabs" @click="chooseTab">
            <el-tab-pane label="全部知识" name="all"></el-tab-pane>
            <el-tab-pane label="知识检索" name="KNOW_DOC"></el-tab-pane>
            <el-tab-pane label="附件检索" name="FILE"></el-tab-pane>
            <el-tab-pane label="智能检索" name="EMBEDDING"></el-tab-pane>
            <el-tab-pane label="返回首页" name="home"></el-tab-pane>
            <el-tab-pane v-if="false" label="高级" name="pro"></el-tab-pane>
          </el-tabs>
          <el-tabs v-if="result.searchType == 'DQ'" v-model="activeNameRef" class="demo-tabs">
            <el-tab-pane :label="result.searchTitle" name="all"></el-tab-pane>
          </el-tabs>
          <div class="embedding-ai-message" v-if="activeNameRef == 'EMBEDDING'">
            <span class="title"> 智能分析：</span> {{ aiBackMsgRef }}
            <el-progress :percentage="50" v-if="aiMsgLoading" status="success" :indeterminate="true" />
            <ai_msg ref="aiRef" :is-show-msg="false" :start-handle="() => { aiMsgLoading = true }"
              :end-handle="() => { aiMsgLoading = false }"></ai_msg>
          </div>
          <div style="display: flex;">
            <search_result :result="result" :word="searchWord" :do-search-handle="doSearch"></search_result>
            <div style="max-width: 400px;">

            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
import ai_msg from '../know_creat/components/ai_msg.vue';
import search_result from './components/search_result.vue';
import web_head from '../components/web_head.vue';
import mini_logo from '@/views/web_page/know_creat/components/mini_logo.vue'
import web_search_box from '../components/web_search_box.vue';
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import Cupk2Request from '@/service/remoteRequests/Cupk2Request';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import type { DataResponse } from '@/types/commons/DataResponse';
import type { DataResult } from '@/types/commons/DataResult';
import notice from '@/components/msg/CupkNotice';
import type { IndexQuery } from '@/types/commons/IndexQuery';
import cupkHtmlUtils from '@/hook/cupkHtmlUtils';
import type { SendMsg } from '@/types/ai/SendMsg';
const router = useRouter();
const aiRef = ref();
const route = useRoute();
const searchBoxRef = ref();
const aiMsgLoading = ref(false);

const activeNameRef = ref('all');
const result: DataResult = reactive({} as DataResult);
const searchWord = ref('');
const loadingFlag = ref(false);
const aiBackMsgRef = ref('');


const doSearch = (query: IndexQuery) => {
  if (query.word) {
    Cupk2Request.submit('api/search', RequestTypeEnum.post, loadingFlag, { word: query.word, model: activeNameRef.value, page: query.page }).then((response: DataResponse) => {
      if (query.model) {
        activeNameRef.value = query.model!;
      }
      searchWord.value = query.word as string;
      Object.assign(result, response.data);
      scrollToTop();
      if (activeNameRef.value == 'EMBEDDING') {
        doAiCompleteForm('我的问题是关于' + query.word + ',现在对这个问题进行分析', (text: string) => { aiBackMsgRef.value = text; }, JSON.stringify(response.data));
      }
    }).catch((e: Error) => {
      notice.byError(e.message);
    });
  }
}

const doAiCompleteForm = (tipword: string, textHandle: (text: string) => void, quoteHtml: string) => {
  const msg = {
    msg: tipword,
    quotingText: cupkHtmlUtils.getMarkDown(quoteHtml),
  } as SendMsg;
  aiRef.value.senMsg(msg, (text: string) => {
    textHandle(text);
  });
}

const goPage = (path: string) => {
  router.push(path);
}
const chooseTab = () => {
  if (activeNameRef.value == 'home') {
    goPage('/home')
    return;
  }
  doSearch({
    word: searchWord.value,
    model: activeNameRef.value,
    page: 1,
  });
}

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};
onMounted(() => {

  searchBoxRef.value.setWord(route.query.word);
  doSearch({
    word: route.query.word as string,
    model: 'all',
    page: 1,
  });
})

</script>
<style scoped>
/* 样式可以根据需要添加 */

.embedding-ai-message {
  border: 1px dotted #888888;
  font-size: 14px;
  color: #999999;
  padding: 20px;
  border-radius: 8px;
  max-width: 700px;
  background-color: var(--el-color-success-light-9);
  line-height: 2em;

  img {
    width: 26px;
    height: 26px;
  }

  .title {
    color: var(--el-color-success);
    font-weight: 700;
  }
}
</style>
